import { useContext, createContext } from "react";
/**
 * 跨层组件通信
 * 【说明】：使用Context机制实现跨层级组件之间的通信
 * 【步骤】：1、使用 createContext方法创建一个上下文对象
 *          2、在顶级组件（R13）通过 Provider 组件来提供数据
 *          3、在底层组件（Grandson）通过 useContext 钩子函数获取数据
 */
// 步骤一：使用 createContext方法创建一个上下文对象
const MsgContext = createContext();

function Grandson() {
  // 步骤三：通过 useContext 钩子函数获取数据
  const msg = useContext(MsgContext);
  return <div> 子组件 {msg}</div>;
}


function Father() {
  return (
    <div>
      父组件 <Grandson></Grandson>
    </div>
  );
}

function Storeys() {
  let message = "2025";

  return (
    // 步骤二：通过 Provider 组件的value来提供数据
    <div>
      顶级组件：{message}
      <MsgContext.Provider value={message}>
        <Father></Father>
      </MsgContext.Provider>
    </div>
  );
}

export default Storeys;
